<template>
  <page-header-wrapper :title="false">
    <a-row :gutter="20">
      <a-col :span="16">
        <a-card
          :loading="loading"
          style="padding: 50px"
        >
          <a-card-meta>
            <div slot="title">
              <h2>{{ articleDetail.title }}</h2>
            </div>
            <div slot="description">
              文章分类：{{articleDetail.category_name}}
              <a-divider type="vertical" />
              发布时间：{{ articleDetail.create_time }}
              <a-divider type="vertical" />
              阅读次数：{{articleDetail.view}}
            </div>
          </a-card-meta>
          <div class="ql-editor" :style="{ marginTop: '40px', fontSize: '16px' }" v-html="articleDetail.content">
          </div>
          <a-divider />
          <div v-if="articleDetail.file != ''" :style="{ padding: '0 50px', marginTop: '10px' }">【下载附件】：<a-button type="pdf" @click="download(articleDetail.file)">{{ articleDetail.filename }}</a-button></div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card
          title="推荐相关问题"
        >
          <template slot="extra">
            <a-button size="small" type="link" @click="$router.push({ name: 'ArticleList' })">更多</a-button>
          </template>
          <a-list item-layout="horizontal" :data-source="hotArticle">
            <a-list-item slot="renderItem" slot-scope="item,index">
              <a-button :title="item.title" size="small" type="link" @click="$router.push({ nane: 'ArticleDetail', params: { id: item.id } })">
                <a-badge
                  :number-style="{
                    backgroundColor: '#fff',
                    color: '#f00',
                    boxShadow: '0 0 0 1px #f00 inset',
                  }"
                  :count="index + 1"
                  style="margin-right:10px"
                />
                <ellipsis :length="58">{{item.title}}</ellipsis>
              </a-button>
            </a-list-item>
          </a-list>
        </a-card>
      </a-col>
    </a-row>
  </page-header-wrapper>
</template>

<script>
  import { Ellipsis } from '@/components'
  import { getArticleDetail } from '@/api/article'
  import { getHot } from '@/api/video'

  export default {
    components: {
      Ellipsis
    },
    name: 'ArticleDetail',
    data () {
      return {
        loading: false,
        articleDetail: {},
        hotArticle: [
          {
            title: '注册资金是1000万，想要实缴2000万的，去工商局办理增加认缴到2000万，这个需要费用吗？'
          },
          {
            title: '增资的出资方式选择什么？'
          },
          {
            title: '原300w注册资本出资方式为货币，增资2000w选择知识产权影响评估实缴？'
          },
          {
            title: '注册资金是1000万，想要实缴2000万的，去工商局办理增加认缴到2000万，这个需要费用吗？'
          },
          {
            title: '增资的出资方式选择什么？'
          },
          {
            title: '原300w注册资本出资方式为货币，增资2000w选择知识产权影响评估实缴？'
          }
        ]
      }
    },
    activated () {
      this.getDetail(this.$route.params.id)
    },
    methods: {
      getDetail (id) {
        const app = this
        getArticleDetail(id).then(res => {
          if (res.status === 0) {
            app.articleDetail = res.result
            const params = {}
            params['page_size'] = 10
            getHot(app.$route.params.id, params).then(res => {
              if (res.status === 0) {
                app.hotArticle = res.result.data
              }
            })
          }
        })
      },
      download (url) {
        window.open(url)
      }
    }
  }
</script>

<style scoped>

</style>
